<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Shape</title>
  <link rel="stylesheet" href="./style.css">
  <style type="text/css">
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="topNavBar" id="topNavBar">
    <div class="topNavBar-inner clearfix" id="topNavBar">
      <a href="#" class="logo" id="logo" style="float: left;">
        <span class="star">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xinghao2"></use>
          </svg>
        </span>
        <span class="text">CSS-SHAPE</span>
      </a>
      <nav class="menu" style="float: right;">
        <ul class="clearfix">
          <li><a href="#">三角形</a></li>
          <li><a href="#">圆形</a></li>
          <li><a href="#">方形</a></li>
          <li><a href="#">多边形</a></li>
          <li><a href="#">特殊图形</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="article-and-sidebar">
    <div class="content">
      <p>
        利用CSS画出各种图形。
      </p>
      <p>
        To be continued.
      </p>
      <div class="shape">
        <h3>Square</h3>
        <div id="square"></div>
        <style contenteditable="true">
          #square {
            width: 100px;
            height: 100px;
            background: red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Rectangle</h3>
        <div id="rectangle"></div>
        <style contenteditable="true">
          #rectangle {
            width: 200px;
            height: 100px;
            background: red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Circle</h3>
        <div id="circle"></div>
        <style contenteditable="true">
          #circle {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Oval</h3>
        <div id="oval"></div>
        <style contenteditable="true">
          #oval {
            width: 200px;
            height: 100px;
            background: red;
            border-radius: 100px / 50px;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Triangle Up</h3>
        <div id="triangle-up"></div>
        <style contenteditable="true">
          #triangle-up {
            width: 0px;
            height: 0px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Triangle Down</h3>
        <div id="triangle-down"></div>
        <style contenteditable="true">
          #triangle-down {
            width: 0px;
            height: 0px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Triangle Left</h3>
        <div id="triangle-left"></div>
        <style contenteditable="true">
          #triangle-left {
            width: 0px;
            height: 0px;
            border-right: 100px solid red;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Triangle Right</h3>
        <div id="triangle-right"></div>
        <style contenteditable="true">
          #triangle-right {
            width: 0px;
            height: 0px;
            border-left: 100px solid red;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Triangle Top Left</h3>
        <div id="triangle-topleft"></div>
        <style contenteditable="true">
          #triangle-topleft {
            width: 0px;
            height: 0px;
            border-top: 100px solid red;
            border-right: 100px solid transparent;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Triangle Top Right</h3>
        <div id="triangle-topright"></div>
        <style contenteditable="true">
          #triangle-topright {
            width: 0px;
            height: 0px;
            border-top: 100px solid red;
            border-left: 100px solid transparent;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Triangle Bottom Left</h3>
        <div id="triangle-bottomleft"></div>
        <style contenteditable="true">
          #triangle-bottomleft {
            width: 0px;
            height: 0px;
            border-bottom: 100px solid red;
            border-right: 100px solid transparent;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Triangle Bottom Right</h3>
        <div id="triangle-bottomright"></div>
        <style contenteditable="true">
          #triangle-bottomright {
            width: 0px;
            height: 0px;
            border-bottom: 100px solid red;
            border-left: 100px solid transparent;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Semicircle Top</h3>
        <div id="semicircle-top"></div>
        <style contenteditable="true">
          #semicircle-top {
            width: 100px;
            height: 50px;
            background: red;
            border-radius: 100px 100px 0 0;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Semicircle Bottom</h3>
        <div id="semicircle-bottom"></div>
        <style contenteditable="true">
          #semicircle-bottom {
            width: 100px;
            height: 50px;
            background: red;
            border-radius: 0 0 100px 100px;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Semicircle Left</h3>
        <div id="semicircle-left"></div>
        <style contenteditable="true">
          #semicircle-left {
            width: 50px;
            height: 100px;
            background: red;
            border-radius: 50px 0 0 50px;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Semicircle Right</h3>
        <div id="semicircle-right"></div>
        <style contenteditable="true">
          #semicircle-right {
            width: 50px;
            height: 100px;
            background: red;
            border-radius: 0 50px 50px 0;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Sector</h3>
        <div id="sector"></div>
        <style contenteditable="true">
          #sector {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 100px 0 0 0;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Trapezoid</h3>
        <div id="trapezoid"></div>
        <style contenteditable="true">
          #trapezoid {
            width: 100px;
            height: 0;
            border-bottom: 100px solid red;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Parallelogram</h3>
        <div id="parallelogram"></div>
        <style contenteditable="true">
          #parallelogram {
            width: 150px;
            height: 100px;
            background: red;
            transform: skew(20deg);
          }
        </style>
      </div>
      <div class="shape">
        <h3>Diamond Square</h3>
        <div id="diamond"></div>
        <style contenteditable="true">
          #diamond {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom-color: red;
            position: relative;
            top: -50px;
          }

          #diamond::after {
            position: absolute;
            top: 50px;
            left: -50px;
            content: '';
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top-color: red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Diamond Shield</h3>
        <div id="diamond-shield"></div>
        <style contenteditable="true">
          #diamond-shield {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom: 20px solid red;
            position: relative;
            top: -55px;
          }

          #diamond-shield::after {
            position: absolute;
            content: '';
            top: 20px;
            left: -50px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top: 70px solid red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Diamond Narrow</h3>
        <div id="diamond-narrow"></div>
        <style contenteditable="true">
          #diamond-narrow {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom: 70px solid red;
            position: relative;
            top: -58px;
          }

          #diamond-narrow::after {
            position: absolute;
            content: '';
            top: 70px;
            left: -50px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top: 70px solid red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Cut Diamond</h3>
        <div id="cut-diamond"></div>
        <style contenteditable="true">
          #cut-diamond {
            border-style: solid;
            border-color: transparent transparent red transparent;
            border-width: 0 25px 25px 25px;
            width: 50px;
            height: 0;
            position: relative;
            box-sizing: content-box;
            margin: 0 0 80px 0;
          }

          #cut-diamond::after {
            position: absolute;
            content: '';
            top: 25px;
            left: -25px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top: 70px solid red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Pentagon</h3>
        <div id="pentagon"></div>
        <style contenteditable="true">
          #pentagon {
            position: relative;
            width: 54px;
            box-sizing: content-box;
            border-width: 50px 18px 0;
            border-style: solid;
            border-color: red transparent;
            margin: 50px 0 0;
          }

          #pentagon::before {
            position: absolute;
            content: '';
            top: -85px;
            left: -18px;
            width: 0;
            height: 0;
            border-width: 0 45px 35px;
            border-style: solid;
            border-color: transparent transparent red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Hexagon</h3>
        <div id="hexagon"></div>
        <style contenteditable="true">
          #hexagon {
            width: 100px;
            height: 55px;
            background: red;
            position: relative;
            margin: 40px 0;
          }

          #hexagon::before {
            position: absolute;
            content: '';
            top: -25px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 25px solid red;
          }

          #hexagon::after {
            position: absolute;
            content: '';
            bottom: -25px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 25px solid red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Octagon</h3>
        <div id="octagon"></div>
        <style contenteditable="true">
          #octagon {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
          }

          #octagon::before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100px;
            height: 0;
            border-left: 29px solid #eee;
            border-right: 29px solid #eee;
            border-bottom: 29px solid red;
          }

          #octagon::after {
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            width: 100px;
            height: 0;
            border-left: 29px solid #eee;
            border-right: 29px solid #eee;
            border-top: 29px solid red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Curved Tail Arrow</h3>
        <div id="curvedarrow"></div>
        <style contenteditable="true">
          #curvedarrow {
            position: relative;
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-right: 9px solid red;
            margin: 0 20px;
          }

          #curvedarrow::after {
            position: absolute;
            content: '';
            top: -12px;
            left: -9px;
            width: 12px;
            height: 12px;
            border: 0px solid transparent;
            border-top: 3px solid red;
            border-radius: 20px 0 0 0;
            transform: rotate(45deg);
          }
        </style>
      </div>
      <div class="shape">
        <h3>Heart</h3>
        <div id="heart"></div>
        <style contenteditable="true">
          #heart {
            position: relative;
            width: 100px;
            height: 90px;
          }

          #heart::before,
          #heart::after {
            position: absolute;
            content: '';
            top: 0;
            left: 50px;
            width: 50px;
            height: 80px;
            background: red;
            border-radius: 50px 50px 0 0;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
          }

          #heart::after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Infinity</h3>
        <div id="infinity"></div>
        <style contenteditable="true">
          #infinity {
            position: relative;
            width: 212px;
            height: 100px;
            box-sizing: content-box;
          }

          #infinity::before,
          #infinity::after {
            position: absolute;
            content: '';
            box-sizing: content-box;
            top: 0;
            left: 0;
            width: 60px;
            height: 60px;
            border: 20px solid red;
            border-radius: 50px 50px 0 50px;
            transform: rotate(-45deg);
          }

          #infinity::after {
            left: auto;
            right: 0;
            border-radius: 50px 50px 50px 0;
            transform: rotate(45deg);
          }
        </style>
      </div>
      <div class="shape">
        <h3>Egg</h3>
        <div id="egg"></div>
        <style contenteditable="true">
          #egg {
            display: block;
            width: 126px;
            height: 180px;
            background: red;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Pac-Man</h3>
        <div id="pacman"></div>
        <style contenteditable="true">
          #pacman {
            width: 0;
            height: 0;
            border: 60px solid red;
            border-right-color: transparent;
            border-radius: 60px;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Talk Bubble</h3>
        <div id="talkbubble"></div>
        <style contenteditable="true">
          #talkbubble {
            width: 120px;
            height: 80px;
            background: red;
            border-radius: 10px;
            position: relative;
          }

          #talkbubble::before {
            position: absolute;
            content: '';
            top: 26px;
            right: 100%;
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-right: 17px solid red;
            border-bottom: 13px solid transparent;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Star(6-points)</h3>
        <div id="star-six"></div>
        <style contenteditable="true">
          #star-six {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
            position: relative;
            margin-bottom: 35px;
          }

          #star-six::after {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
            position: absolute;
            content: '';
            top: 30px;
            left: -50px;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Star(5-points)</h3>
        <div id="star-five"></div>
        <style contenteditable="true">
          #star-five {
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            position: relative;
            transform: rotate(35deg);
            margin: 70px 0;
          }

          #star-five::before {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 80px solid red;
            position: absolute;
            content: '';
            top: -45px;
            left: -65px;
            transform: rotate(-35deg);
          }

          #star-five::after {
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            position: absolute;
            content: '';
            top: 3px;
            left: -105px;
            transform: rotate(-70deg);
          }
        </style>
      </div>
      <div class="shape">
        <h3>12 Point Burst</h3>
        <div id="burst-12"></div>
        <style contenteditable="true">
          #burst-12 {
            width: 80px;
            height: 80px;
            background: red;
            position: relative;
          }

          #burst-12::before,
          #burst-12::after {
            width: 80px;
            height: 80px;
            background: red;
            position: absolute;
            content: '';
            top: 0;
            left: 0;
          }

          #burst-12::before {
            transform: rotate(30deg);
          }

          #burst-12::after {
            transform: rotate(60deg);
          }
        </style>
      </div>
      <div class="shape">
        <h3>8 Point Burst</h3>
        <div id="burst-8"></div>
        <style contenteditable="true">
          #burst-8 {
            width: 80px;
            height: 80px;
            background: red;
            position: relative;
            transform: rotate(20deg);
          }

          #burst-8::before {
            width: 80px;
            height: 80px;
            background: red;
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            transform: rotate(135deg);
          }
        </style>
      </div>
      <div class="shape">
        <h3>Yin Yang</h3>
        <div id="yin-yang"></div>
        <style contenteditable="true">
          #yin-yang {
            width: 100px;
            height: 100px;
            background: linear-gradient(to bottom, red 0%, red 50%, #fff 50%, #fff 100%);
            border: 2px solid red;
            border-radius: 50%;
            position: relative;
            box-sizing: content-box;
          }

          #yin-yang::before {
            position: absolute;
            content: '';
            top: 25px;
            left: 0;
            width: 10px;
            height: 10px;
            background: white;
            border: 20px solid red;
            border-radius: 50%;
            box-sizing: content-box;
          }

          #yin-yang::after {
            position: absolute;
            content: '';
            top: 25px;
            left: 50px;
            width: 10px;
            height: 10px;
            background: red;
            border: 20px solid white;
            border-radius: 50%;
            box-sizing: content-box;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Badge Ribbon</h3>
        <div id="badge-ribbon"></div>
        <style contenteditable="true">
          #badge-ribbon {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50px;
            position: relative;
            margin-bottom: 40px;
          }

          #badge-ribbon::before,
          #badge-ribbon::after {
            position: absolute;
            content: '';
            top: 70px;
            left: -10px;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 70px solid red;
            transform: rotate(-140deg);
          }

          #badge-ribbon::after {
            left: auto;
            right: -10px;
            transform: rotate(140deg);
          }
        </style>
      </div>
      <div class="shape">
        <h3>TV Screen</h3>
        <div id="tv"></div>
        <style contenteditable="true">
          #tv {
            width: 200px;
            height: 150px;
            background: red;
            position: relative;
            border-radius: 50% / 11%;
          }

          #tv::before {
            position: absolute;
            content: '';
            top: 10%;
            bottom: 10%;
            left: -5%;
            right: -5%;
            background: inherit;
            border-radius: 5% / 50%;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Chevron</h3>
        <div id="chevron"></div>
        <style contenteditable="true">
          #chevron {
            position: relative;
            width: 200px;
            height: 60px;
            padding: 12px;
            margin-bottom: 6px;
            box-sizing: border-box;
          }

          #chevron::before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            background: red;
            height: 100%;
            width: 51%;
            transform: skew(0, 6deg);
          }

          #chevron::after {
            position: absolute;
            content: '';
            top: 0;
            right: 0;
            background: red;
            height: 100%;
            width: 50%;
            transform: skew(0, -6deg);
          }
        </style>
      </div>
      <div class="shape">
        <h3>Magnifying Glass</h3>
        <div id="magnifying-glass"></div>
        <style contenteditable="true">
          #magnifying-glass {
            width: 0.4em;
            height: 0.4em;
            position: relative;
            font-size: 10em;
            border: 0.1em solid red;
            border-radius: 0.35em;
            box-sizing: content-box;
            margin-bottom: 30px;
          }

          #magnifying-glass::before {
            position: absolute;
            content: '';
            right: -0.25em;
            bottom: -0.1em;
            width: 0.35em;
            height: 0.08em;
            background: red;
            transform: rotate(45deg);
          }
        </style>
      </div>
      <div class="shape">
        <h3>Facebook Icon</h3>
        <div id="facebook-icon"></div>
        <style contenteditable="true">
          #facebook-icon {
            width: 100px;
            height: 110px;
            background: red;
            position: relative;
            border: 15px solid red;
            border-bottom: 0;
            border-radius: 5px;
            box-sizing: content-box;
            overflow: hidden;
          }

          #facebook-icon::before {
            position: absolute;
            content: '';
            bottom: -30px;
            right: -37px;
            width: 40px;
            height: 90px;
            background: red;
            border: 20px solid #eee;
            border-radius: 25px;
            box-sizing: content-box;
          }

          #facebook-icon::after {
            position: absolute;
            content: '';
            top: 50px;
            right: 5px;
            width: 55px;
            height: 20px;
            background: #eee;
            box-sizing: content-box;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Moon</h3>
        <div id="moon"></div>
        <style contenteditable="true">
          #moon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            box-shadow: 15px 15px 0 0 red;
            margin-top: -10px;
            margin-bottom: 40px;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Flag</h3>
        <div id="flag"></div>
        <style contenteditable="true">
          #flag {
            width: 110px;
            height: 56px;
            background: red;
            position: relative;
            padding-top: 15px;
            box-sizing: content-box;
          }

          #flag::after {
            position: absolute;
            content: '';
            left: 0;
            bottom: 0;
            width: 0;
            height: 0;
            border-bottom: 13px solid #eee;
            border-left: 55px solid transparent;
            border-right: 55px solid transparent;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Cone</h3>
        <div id="cone"></div>
        <style contenteditable="true">
          #cone {
            width: 0;
            height: 0;
            border-left: 70px solid transparent;
            border-right: 70px solid transparent;
            border-top: 100px solid red;
            border-radius: 50%;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Cross</h3>
        <div id="cross"></div>
        <style contenteditable="true">
          #cross {
            width: 20px;
            height: 100px;
            background: red;
            position: relative;
            margin: 0 40px;
          }

          #cross::after {
            position: absolute;
            content: '';
            top: 40px;
            left: -40px;
            width: 100px;
            height: 20px;
            background: red;
          }
        </style>
      </div>
      <div class="shape">
        <h3>Base</h3>
        <div id="base"></div>
        <style contenteditable="true">
          #base {
            width: 100px;
            height: 55px;
            background: red;
            position: relative;
            margin-top: 55px;
          }

          #base::before {
            position: absolute;
            content: '';
            top: -35px;
            left: 0;
            width: 0;
            height: 0;
            border-bottom: 35px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
          }
        </style>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    window.onscroll = function (x) {
      if (window.scrollY > 0) {
        $('.topNavBar').addClass('sticky')
      } else {
        $('.topNavBar').removeClass('sticky')
      }
    }
  </script>
  <script src="//at.alicdn.com/t/font_1195027_dk92flqco1.js"></script>
</body>


</html>